/**
 * Created by wzj on 2017/4/7.
 */
/**
 * 时间线
 *
 *
 *
 *
 *
 *
 *
 *
 */
var DataTime = [
	/*
	{target:"买方",event:"下单",datetime:"2017-03-27 13:49:00"},
	{target:"卖方",event:"上传双签合同",datetime:"2017-03-27 17:49:00"},
	{target:"买方",event:"上传双签合同",datetime:"2017-03-27 17:49:00"},
	{target:"买方",event:"校对合同",datetime:"2017-03-27 17:49:00"},
	{target:"卖方",event:"校对合同",datetime:"2017-03-27 17:49:00"},
	{target:"买方",event:"付首款",datetime:"2017-03-27 13:49:00"},
	{target:"卖方",event:"上传放货单",datetime:"2017-03-27 13:49:00"},
	{target:"买方",event:"校对放货单",datetime:"2017-03-27 13:49:00"},
	{target:"买方",event:"已提货",datetime:"2017-03-27 13:49:00"},
	{target:"卖方",event:"上传放货单",datetime:"2017-03-27 13:49:00"},
	{target:"买方",event:"校对结算单",datetime:"2017-03-27 13:49:00"},
	{target:"卖方",event:"付尾款",datetime:"2017-03-27 13:49:00"},
	{target:"买方",event:"付尾款",datetime:"2017-03-27 13:49:00"}
*/
];

/*--------------------------------------------------------------------------------------------*/
class TimeLine extends React.Component {

	constructor(props) {
		super(props);
		//初始数据
		this.state = {
			datas: DataTime
		}
	}

	render(){
		var left = this.props.left;
		var right = this.props.right;

		var line = this.state.datas.map((point) =>
			<div className={point.target == left ? "timeline-point left-point":"timeline-point right-point"}>
				<div className="point-target">{point.target}</div>
				<div className="point-event">{point.event}</div>
				<div className="point-time">{point.datetime}</div>
			</div>
		);

		return (
			<div className="timeline">
				<div className="timeline-caption">{this.props.title}</div>
				<div className="timeline-axes">{line}</div>
			</div>
		);
	}
}


